<template>
  <div class="ChatBan panel panel-success">
    <form action="" class="from">
      <span class="label label-success">{{info}}</span>
      <div>
        {{msgObjString}}
      </div>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">uid</span>
          <input type="text" name="uid" placeholder="UID" class="form-control" v-model="uidinput">

        </div>
      </div>

      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">sendtouid</span>
          <input type="text" name="sendtouid" placeholder="sendtouid" class="form-control" v-model="sendtouid">
        </div>
      </div>

      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">URL</span>
          <input type="text" class ="form-control" v-model="url">
          <span class="btn btn-primary input-group-addon" @click="link" v-if="ws==null">连接</span>
          <span class="btn btn-danger input-group-addon" v-else  @click="close">断开</span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">msg</span>
          <input type="text" class ="form-control" v-model="msginput" @change="changemsg">
          <span class="btn  btn-primary input-group-addon" @click="send">send</span>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  data(){
    return {
      url:"ws://127.0.0.1:8080/msg",
      ws:null,
      msgObj:{uid:123,name:"username1",msg:"",type:'text',sendtouid:0},
      msginput:"",
      info:"",
      uidinput:0,
      sendtouid:0
    }
  },
  watch:{
    uidinput(n,o){
      let _this = this
      _this.$set(_this.msgObj,'uid',n)
    },
    sendtouid(n,o){
      let _this = this
      if (n>0){
        _this.$set(_this.msgObj,'sendtouid',n)
        _this.$set(_this.msgObj,'type','singlesend')
      }else{
        _this.$set(_this.msgObj,'type','broadcast')
      }

    }
  },
  computed:{
    msgObjString(){
      let _this = this
      return  JSON.stringify(_this.msgObj)
    }
  },
  methods:{
    link(){
      let _this = this
      _this.ws = new WebSocket(_this.url);
      _this.$nextTick(function(){
        _this.ws.onopen=function(e){
          _this.info+="websocke is open"
          _this.$set(_this.msgObj,'type','open')
          _this.ws.send(JSON.stringify(_this.msgObj))
        }
        _this.ws.onmessage=function(e){
          console.log(e)
          _this.info+=e.data+"|"
        }
      })

    },
    changemsg(){
       let _this = this
      _this.$set(_this.msgObj,'msg',_this.msginput)
    },
    send(){
      let _this = this
      if(_this.msgObj.sendtouid==0)
        _this.$set(_this.msgObj,'type','broadcast')
        _this.$nextTick(function(){
          _this.ws.send(JSON.stringify(_this.msgObj))
        })

    },
    close(){
      let _this = this
      _this.ws.close()
    }
  }
}
</script>
